/*
 * @Description: 文章详情 - 右侧内容
 * @Date: 2020-09-11 10:35:00
 * @Author: 黄治恩
 */

import React from 'react'
import { Link } from 'react-router-dom'
import { Image } from 'antd'

// 相关文章
import RelatedItem from '@/components/Article/Related/Related-item'

import './style.scss'

class AsideRight extends React.Component{
  state = {
    list:[
      {
        id:1,
        name:'「查缺补漏」巩固你的HTTP知识体系'
      },
      {
        id:2,
        name:'「查缺补漏」送你 54 道 JavaScript 面试题'
      },
      {
        id:3,
        name:'「一劳永逸」48张小图带你领略flex布局之美'
      }
    ]
  }
  render() {
    let { list } = this.state
    
    // 相关文章列表
    const relatedList = list.map( item => 
      <React.Fragment key={item.id} > 
        <RelatedItem info={item} />
      </React.Fragment>
    )

    return (
      <div className="aside-box">
        <div className="sidebar-block author-block">
          <div className="block-title">
            关于作者
          </div>
          <div className="block-body">
            <Link to="/user?id=1234" className="user-item">
              <Image className="user-img" preview={false} width={50} height={50} alt="user" src="@/assets/img/user/user2.png" />
              <div className="user-info">
                <div className="user-name">名字</div>
                <div className="user-brief">简介简介简介简介简介简介简介简介</div>
              </div>
            </Link>
            <div className="stat-item">
              获得点赞 <span className="count">10086</span>
            </div>
            <div className="stat-item">
              获得点赞 <span className="count">10086</span>
            </div>
          </div>
        </div>
        <div className="sidebar-block applets">
          <Image width={50} height={50} src="//s3.pstatp.com/toutiao/xitu_juejin_web/img/app-install.6226a3b.png" />
          <div className="text">
            <h4 className="title">扫码打开小程序</h4>
            <p className="desc">你想要的都有</p>
          </div>
        </div>
        <div className="sidebar-block article-block">
          <div className="block-title">
            相关文章
          </div>
          <div className="block-body">
            {/* 相关文章 */}
            {relatedList}
          </div>
        </div>
      </div>
    )
  }
}

export default AsideRight
